<!--商品详情-->
<template>
    <div class="page_goodsDetails pageNormalBackground">
        <headerT title="商品详情"/>
        <div style="height:calc(100vh - 3.1rem);overflow-y: auto;margin-top: 1.2rem;">
            <div class="swiperInfo everyBlockBgcolor">
                <swiper @on-index-change="onSwiperItemIndexChange" v-model="swiperItemIndex" :height="'7.64rem'" auto
                        :show-dots="false" v-if="detailsInfo">
                    <swiper-item class="swiper-demo-img" v-for="(item, index) in detailsInfo.good_img" :key="index">
                        <img :src="item.img_url" class="iconImg">
                    </swiper-item>
                </swiper>
                <div class="showLimitTime" v-if="detailsInfo && detailsInfo.good_marketing">
                    <!--<img src="../../../static/images/icon-limitTime.png" class="limitTime" alt=""/>-->
                    <div v-if="detailsInfo.good_marketing.pattern === 3">
                        <div class="text translateBlock ">距离限时购结束</div>
                        <div class="time translateBlock">
                            <span class=" timeColor">{{day_span}}</span>
                            <span>天</span>
                            <span class=" timeColor">{{hour_spna}}</span>
                            <span>:</span>
                            <span class=" timeColor">{{minute_span}}</span>
                            <span>:</span>
                            <span class=" timeColor">{{second_span}}</span>
                        </div>
                    </div>
                    <div v-if="detailsInfo.good_marketing.pattern === 2">
                        <div class="text translateBlock " style="padding-left: .3rem;">促销商品</div>
                        <div class="translateBlock time1 mainColor">{{detailsInfo.good_marketing.start_time_limit}}
                        </div>
                        <div class="translateBlock" style="font-size: .25rem;color: #fff;">至</div>
                        <div class="translateBlock time1 mainColor">{{detailsInfo.good_marketing.end_time_limit}}</div>
                    </div>
                </div>
            </div>

            <div class="everyBlockBgcolor goodsInfo comMargin">
                <div>
                    <div class="mainColor translateBlock">
                        <span class="iconMoney">¥</span>
                        <span v-if="detailsInfo && detailsInfo.good_marketing &&
                detailsInfo.good_marketing.promotion_price">{{detailsInfo.good_marketing.promotion_price}}
                        </span>
                        <span v-else>
                            <span v-if="detailsInfo && detailsInfo.good_specification">
                                {{detailsInfo.good_specification[0].price}}
                            </span>
                        </span>
                    </div>
                    <div class="translateBlock vMiddle floatFight share">
                        <div class="btnShare">
                            <img src="../../../static/images/share.png" alt=""/>
                            <span>分享</span>
                        </div>
                    </div>
                </div>
                <div class="goodsTitle" v-if="detailsInfo">
                    {{detailsInfo.goods_title}}
                </div>
                <div class="goodsDescripts" v-if="detailsInfo">
                    {{detailsInfo.goods_short_title}}
                </div>
            </div>

            <div class="everyBlockBgcolor otherInfo comMargin">
                <div class="itemOtherInfo">
                    <img src="../../../static/images/icon-info.png" class="iconImg vMiddle" alt=""/>
                    <div class="translateBlock label">其他信息</div>
                    <div class="translateBlock sales">
                        <span v-if="detailsInfo">销量：{{detailsInfo.sales_volume}}</span>
                        <span>|</span>
                        <span v-if="detailsInfo">浏览量：{{detailsInfo.page_view}}</span>
                    </div>
                </div>
                <div class="itemOtherInfo">
                    <img src="../../../static/images/icon-position2.png" class="iconImg vMiddle" alt=""/>
                    <div class="translateBlock label">适用门店</div>
                    <div class="translateBlock shops" v-if="detailsInfo &&  detailsInfo.stores_info">
                        <span v-for="(item,index) in  detailsInfo.stores_info">
                            <span>{{item.district}}</span>
                            <span v-show="index <  detailsInfo.stores_info - 1">,</span>
                        </span>
                    </div>
                </div>
            </div>

            <div class="everyBlockBgcolor shopInfo comMargin">
                <div class="itemOtherInfo">
                    <img class="iconImg vMiddle" src="../../../static/images/icon-shop.png" alt=""/>
                    <div class="translateBlock label">店铺信息</div>
                    <div class="translateBlock floatFight">
                        <div class="translateBlock mainBgColor number" v-if="detailsInfo">
                            {{detailsInfo.stores_info.length}}
                        </div>
                        <div class="translateBlock shopBtn" @click="showShops = !showShops">
                            <img v-if="!showShops" src="../../../static/images/jiantou_gray.png"
                                 class="iconOpen iconJiantou vMiddle"
                                 alt=""/>
                            <img v-else src="../../../static/images/jiantou_gray.png"
                                 class="iconClose iconJiantou vMiddle"
                                 alt=""/>
                        </div>
                    </div>
                </div>

                <div v-show="showShops">
                    <div v-if="detailsInfo && detailsInfo.stores_info">
                        <div class="shopDetails" v-for="item in detailsInfo.stores_info">
                            <div class="translateBlock name">
                                <div class="shopName">{{item.store_name}}</div>
                                <div class="shopAddress">{{item.site}}</div>
                            </div>
                            <a class="translateBlock phone" :href="'tel:'+ item.phone + '#mp.weixin.qq.com'">
                                <img src="../../../static/images/phone.png" class="vMiddle iconPhonr" alt=""/>
                            </a>
                            <div class="btnMore" v-if="detailsInfo.stores_info.length > 2">
                                <div class="btnItem">
                                    更多
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="chooseNumber everyBlockBgcolor comMargin">
                <div class="itemOtherInfo" @click="isChooseNumber = true">
                    <img class="iconImg vMiddle" src="../../../static/images/icon-shop.png" alt=""/>
                    <div class="translateBlock label">选择(数量与规格)</div>
                    <div class="chooseAttribute translateBlock">
                        {{chooseAttributeText}}
                    </div>
                    <div class="translateBlock floatFight">
                        <img src="../../../static/images/jiantou_gray.png" class="vMiddle iconLeft" alt=""/>
                    </div>
                </div>
            </div>

            <div class="evaluate everyBlockBgcolor comMargin">
                <div class="itemOtherInfo">
                    <img class="iconImg vMiddle" src="../../../static/images/pt.png" alt=""/>
                    <div class="translateBlock label">点评商品</div>
                    <div class="translateBlock floatFight" v-if="detailsInfo  && detailsInfo.comment.length > 1"
                         @click="goEvaluationList()">查看更多
                        <img src="../../../static/images/jiantou_gray.png" class="vMiddle iconLeft" alt=""/>
                    </div>
                </div>
                <div v-if="detailsInfo  && detailsInfo.comment.length">
                    <div>
                        <img class="iconAvatar vMiddle" :src="detailsInfo.comment[0].user_info.img" alt=""/>
                        <span class="vMiddle userName">{{detailsInfo.comment[0].user_info.nickname}}</span>
                    </div>
                    <div class="comment">
                        {{detailsInfo.comment[0].comment_content}}
                    </div>
                    <div v-if="detailsInfo.comment[0].comment_picture" style="margin:0 .42rem;">
                        <div class="translateBlock itemPicture" v-for="item in comment_imgs" :key="item">
                            <img :src="item" alt="" class="commentPic"/>
                        </div>
                    </div>
                </div>

            </div>

            <div class="nearby everyBlockBgcolor comMargin">
                <div class="itemOtherInfo">
                    <img class="iconlight vMiddle" src="../../../static/images/nl.png" alt=""/>
                    <div class="translateBlock label">附近在售爆品</div>
                </div>
                <div class="goods" v-if="detailsInfo && detailsInfo.nearby">
                    <div v-for="item in detailsInfo.nearby" class="itemGoods translateBlock"
                         @click="$tools.goPage_query('goodsDetails',{goods_id:item.id})">
                        <div>
                            <img :src="item.good_img[0].img_url" alt=""/>
                        </div>
                        <div class="goodsName moreTextEllipsis">
                            {{item.goods_title}}
                        </div>
                        <div class="discount mainColor">
                            <span>¥</span>
                            <span></span>
                            <span v-if="item.good_marketing && item.good_marketing.promotion_price">
                                {{item.good_marketing.promotion_price}}
                            </span>
                            <span v-else>
                                <span v-if="item.good_specification">{{item.good_specification[0].price}}</span>
                            </span>
                        </div>
                        <div class="originalPrice" v-if="item.good_specification">
                            ¥{{item.good_specification[0].original_price}}
                        </div>
                    </div>
                </div>
            </div>

            <div class="showDetails everyBlockBgcolor comMargin">
                <div class="itemOtherInfo">
                    <img class="iconImg vMiddle" src="../../../static/images/goodsDetail.png" alt=""/>
                    <div class="translateBlock label">商品详情</div>
                </div>
                <div v-if="detailsInfo && detailsInfo.goods_details" v-html="detailsInfo.goods_details"
                     class="details"></div>
            </div>
        </div>

        <div class="goodsBtns">
            <div class="translateBlock" @click="$tools.goPage('/index')">
                <div style="height: 1rem;">
                    <img src="../../../static/images/homeNo.png" class="itemBtn" alt=""/>
                </div>
                <div class="btnLabel">首页</div>
            </div>
            <div class="translateBlock btnCollect" v-if="detailsInfo && detailsInfo.attention_info ===2"
                 @click="setGoodUserAttention">
                <div style="height: 1rem;">
                    <img src="../../../static/images/icon-collect.png" class="itemBtn" alt=""/>
                </div>
                <div class="btnLabel">关注</div>
            </div>
            <div class="translateBlock btnCollect" v-if="detailsInfo && detailsInfo.attention_info ===1"
                 @click="cancelGoodUserAttention">
                <div style="height: 1rem;">
                    <img src="../../../static/images/collected.png" class="itemBtn" alt=""/>
                </div>
                <div class="btnLabel">取消关注</div>
            </div>
            <div class="translateBlock vMiddle" @click="reservaGoods()">
                <div class="btn btnBuy btnBook">预约库存</div>
            </div>
            <div class="translateBlock vMiddle"
                 @click="buyInfo()">
                <div class="btn btnBuy">立即购买</div>
            </div>
        </div>

        <!--选择数量-->
        <div v-transfer-dom>
            <popup v-model="isChooseNumber" position="bottom" max-height="60%" class="chooseNumberDialog">
                <div class="goodsInfo everyBlockBgcolor">
                    <div class="title">
                        <img src="../../../static/images/store.png" class="iconStore" alt=""/>
                        <div class="translateBlock goods_name" v-if="detailsInfo">{{detailsInfo.goods_name}}</div>
                        <div class="iconClose translateBlock" @click="isChooseNumber = false">
                            <img src="../../../static/images/icoN-close.png" class="iconStore" style="width: .5rem;"
                                 alt=""/>
                        </div>

                    </div>
                    <div class="goodsDetails" v-if="detailsInfo">
                        <img :src="detailsInfo.good_img[0].img_url" class="iconGoods" alt=""/>
                        <div class="translateBlock" style="vertical-align: top;">
                            <div class="moreTextEllipsis goodsName">{{detailsInfo.goods_title}}</div>
                            <div class="goodsPriceInfo displayFlex">
                                <div class="goodsPrice displayFlex">¥
                                    <span v-if="detailsInfo.good_marketing && detailsInfo.good_marketing.promotion_price">
                                        {{detailsInfo.good_marketing.promotion_price}}
                                    </span>
                                    <span v-else>
                                        <span v-if="detailsInfo.good_specification">
                                            {{detailsInfo.good_specification[0].price}}
                                        </span>
                                    </span>
                                </div>
                                <div class="goodsNums">x{{number}}</div>
                            </div>
                        </div>
                        <div class="goodsLableBox">
                            <div class="goodsLableContent"
                                 v-for="(item,index) in detailsInfo.good_specification_info_array" :key="index">
                                <div class="goodsLableTitle">{{item.name}}</div>
                                <div class="displayFlex goodsLableGuige">
                                    <span v-for="(item2,idx) in item.children" :class="item2.check ? 'choosed' :
                                    'normal'" class="itemAttribute" :key="idx" @click="chooseAttribute(index,idx)">
                                        {{item2.attribute}}
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="goodsNumber">
                            <group>
                                <x-number title="购买数量" v-model="number" :min="0"
                                          fillable></x-number>
                            </group>
                        </div>
                    </div>

                    <div class="btnGroups">
                        <div class="translateBlock vMiddle" @click="reservaGoods()">
                            <div class="btn btnBuy btnBook">预约库存</div>
                        </div>
                        <div class="translateBlock vMiddle" style="margin-left: 1rem;"
                             @click="buyInfo()">
                            <div class="btn btnBuy">立即购买</div>
                        </div>
                    </div>
                </div>
            </popup>
        </div>

    </div>
</template>

<script>
    import {goodsDetails, goodUserAttention, goodUserCancelAttention} from '../../services/goods'
    import {XInput, Group, Swiper, SwiperItem, XNumber, Popup, TransferDom} from 'vux'
    import Vue from 'vue'

    export default {
        name: "goodsDetails",
        directives: {
            TransferDom
        },
        components: {
            Swiper,
            SwiperItem,
            XNumber, Popup,
            XInput, Group,
        },
        data() {
            return {
                showShops: false,
                goods_id: this.$route.query.goods_id,
                longitude: '106.57',     // 经度
                dimensionality: '29.55',  // 纬度
                detailsInfo: null,
                swiperItemIndex: 1,  // 轮播下表
                day_span: '',
                hour_spna: '',
                minute_span: '',
                second_span: '',
                isChooseNumber: false,   // 是否显示选择数量弹框
                number: 1,   // 选择商品数量
                comment_imgs: [],    // 商品评价的图片
                chooseAttributeId: '',   // 选择的规格
                chooseAttributeText: '',   // 选择的规格
            }
        },

        mounted() {
            this.getDetails();
        },
        watch: {},
        methods: {
            // 获取商品详情
            getDetails() {
                let param = {
                    goods_id: this.goods_id,
                    longitude: this.longitude,
                    dimensionality: this.dimensionality,
                }
                this.$post(goodsDetails, param).then(res => {
                    this.detailsInfo = res.data;
                    let _time = res.data.good_pattern_time;
                    let _time1 = this.$tools.changeTimeToNumber(_time);
                    this.computedTime(_time1);
                    if (res.data.comment.length) {
                        this.comment_imgs = res.data.comment[0].comment_img.split(',')
                    }
                    if (this.detailsInfo.good_specification_info_array) {
                        this.detailsInfo.good_specification_info_array.forEach(item => {
                            item.children.forEach(i => {
                                Vue.set(i, 'check', false);
                            })
                        })
                    }

                    console.log(this.detailsInfo.good_specification_info_array)
                })
            },

            // 轮播图片切换
            onSwiperItemIndexChange(ref) {
                // console.log(ref)
            },

            // 跳转到评论列表
            goEvaluationList() {
                window.sessionStorage.setItem('checkIndex', 5)
                this.$tools.goPage_query('evaluationList', {goods_id: this.goods_id})
            },

            // 关注商品
            setGoodUserAttention() {
                let param = {
                    good_id: this.goods_id,
                }
                this.$post(goodUserAttention, param).then(res => {
                    this.detailsInfo.attention_info = 1;
                })
            },

            // 取消关注
            cancelGoodUserAttention() {
                let param = {
                    good_id: this.goods_id,
                }
                this.$post(goodUserCancelAttention, param).then(res => {
                    this.detailsInfo.attention_info = 2;
                })
            },

            // 预约库存
            reservaGoods() {
                this.$tools.goPage_query('writeYuyue', {allYuyueId: this.goods_id})
            },

            // 选择规格
            chooseAttribute(index, idx) {
                this.detailsInfo.good_specification_info_array.forEach((item, x) => {
                    item.children.forEach((i, y) => {
                        if (index === x && idx === y) {
                            i.check = true;
                            this.chooseAttributeId = i.id;
                            this.chooseAttributeText = i.attribute;
                        } else {
                            i.check = false;
                        }
                    })
                })
            },

            // 立即购买
            buyInfo() {
                if (!this.chooseAttributeId) {
                    this.$vux.toast.text("请选择规格！", "top");
                    return;
                }
                this.$tools.goPage_query('comfirmOrder', {
                    goods_id: this.goods_id,
                    number: this.number,
                    specificationId: this.chooseAttributeId,
                    chooseAttributeText: this.chooseAttributeText
                })
            },

            // 获取到时间并倒数
            computedTime(second) {
                let _that = this;
                let countdown = second;
                let day = 24 * 60 * 60; //一天秒数
                let hour = 60 * 60; //一小时秒数
                let minute = 60; //分钟
                let _day_span = 0;
                let _hour_spna = 0;
                let _second_span = 0;
                let _minute_span = 0;
                let refreshcode;
                let refreshcode_time;

                refreshcode = setInterval(function () {
                    let span = "";
                    if (countdown > day) {
                        _day_span = Math.floor(countdown / day);
                        span = _day_span + "天";
                        _that.day_span = _day_span;
                    }
                    if (countdown > hour) {
                        _hour_spna = Math.floor((countdown - _day_span * day) / hour);
                        let h = _hour_spna + "小时";
                        _that.hour_spna = _hour_spna > 9 ? _hour_spna : '0' + _hour_spna;
                        span += h;
                    }
                    if (countdown > minute) {
                        _minute_span = Math.floor((countdown - _day_span * day - _hour_spna * hour) / minute);
                        let h = _minute_span + "分";
                        _that.minute_span = _minute_span > 9 ? _minute_span : '0' + _minute_span;
                        span += h;
                    }
                    if (countdown > 0) {
                        _second_span = countdown - _day_span * day - _hour_spna * hour - _minute_span * minute;
                        let s = _second_span + "秒";
                        _that.second_span = _second_span > 9 ? _second_span : '0' + _second_span;
                        span += s;
                    }
                    refreshcode_time = span;
                    _that.endTime = refreshcode_time;

                    if (countdown == '0秒') {
                        _that.endTime = "";
                        clearInterval(refreshcode)
                        return;
                    } else {
                        countdown--;
                    }

                }, 1000);

            },
        },
    };
</script>

<style lang="less" rel="stylesheet/less" type="text/less">
    .page_goodsDetails {

        .swiperInfo {

            padding: 0.25rem;

            .iconImg {
                width: 100%;
                height: 7.64rem;
            }

            .showLimitTime {
                height: 1rem;
                line-height: .55rem;
                background: url('../../../static/images/icon-limitTime.png');

                .text {
                    font-size: 0.32rem;
                    color: #fff;
                    padding-left: 0.54rem;
                }

                .time {
                    color: #fff;
                    width: 6rem;
                    text-align: right;
                    font-size: 0.3rem;

                    .timeColor {
                        background-color: #fff;
                        color: #FFAE05;
                        padding: 1px 3px;
                    }
                }

                .time1 {
                    font-size: 0.34rem;
                }

            }
        }

        .comMargin {
            margin: 0.25rem;
        }

        .goodsInfo {
            padding: 0.39rem 0.42rem;

            .iconMoney {
                font-size: .44rem;
            }

            .btnShare {
                line-height: 0.59rem;
                border: 1px solid #FF910A;
                border-radius: 1rem;
                font-size: 0.3rem;
                color: #FF9709;
                margin-top: .3rem;
                padding: 0 0.3rem;

                .icon-share {
                    vertical-align: middle;
                }
            }

            .goodsTitle {
                clear: both;
                font-size: .37rem;
                line-height: 0.49rem;
            }

            .goodsDescripts {
                color: #9F9F9F;
                font-size: 0.3rem;
                line-height: 0.39rem;
                margin: 0.2rem 0;
            }
        }

        .iconImg {
            width: 0.35rem;
            height: 0.35rem;
            margin-left: .42rem;
        }

        .itemOtherInfo {
            height: 1.3rem;
            line-height: 1.3rem;
            font-size: .3rem;
            color: #4E4E4E;
        }

        .label {
            font-size: 0.3rem;
            padding: 0 .2rem 0 .1rem;
        }

        .otherInfo {
            .itemOtherInfo {
                border-bottom: 1px solid #E2E2E2;

                .sales {
                    color: #9F9F9F;
                }
            }

            .itemOtherInfo:last-child {
                border: none;
            }
        }

        .shopInfo {

            .shopBtn {
                width: 1.3rem;
                text-align: center;
            }

            .number {
                line-height: .49rem;
                font-size: .25rem;
                color: #fff;
                padding: 0 .3rem;
                border-radius: 1rem;
            }

            .iconOpen {
                transform: rotate(90deg);
            }

            .iconClose {
                transform: rotate(-90deg);
            }

            .iconJiantou {
                width: .24rem;
            }

            .shopDetails {
                color: #4e4e4e;
                border-bottom: 1px solid #EBEBEB;
                margin: .3rem 0 .1rem .42rem;

                .name {
                    width: 6.5rem;
                }

                .shopName {
                    font-size: .37rem;
                }

                .shopAddress {
                    font-size: .32rem;
                    line-height: .44rem;
                }

                .phone {
                    width: 2rem;
                    text-align: center;
                }

                .iconPhonr {
                    width: .37rem;
                    height: .37rem;
                    margin-top: -.3rem;
                }

                .btnMore {
                    position: relative;
                    height: 1rem;
                    margin: 0.2rem auto;

                    .btnItem {
                        position: absolute;
                        left: 50%;
                        transform: translateX(-50%);
                        width: 1.9rem;
                        height: .6rem;
                        line-height: .6rem;
                        border-radius: 1rem;
                        font-size: .27rem;
                        text-align: center;
                        color: #707070;
                        border: 1px solid #707070;

                    }
                }
            }
        }

        .chooseNumber, .evaluate {
            .iconLeft {
                margin-right: .39rem;
            }

            .iconAvatar {
                width: .9rem;
                height: .9rem;
                border-radius: 50%;
                margin-left: .42rem;
            }

            .comment {
                line-height: .55rem;
                color: #4e4e4e;
                font-size: .34rem;
                padding: 0 .39rem .3rem .39rem;
            }

            .userName {
                color: #4e4e4e;
                font-size: .39rem;
            }

            .commentPic {
                width: 1.52rem;
                height: 1.52rem;
            }

            .itemPicture {
                margin-right: .2rem;
            }

            .itemPicture:last-child {
                margin-right: 0;
            }
        }

        .nearby {
            .iconlight {
                height: .43rem;
                margin-left: .42rem;
            }

            .goods {
                margin: 0 .42rem;

                .goodsName {
                    color: #4E4E4E;
                    font-size: .25rem;
                    -webkit-line-clamp: 2;
                }

                .discount {
                    line-height: .44rem;
                    font-size: 0.32rem;
                }

                .originalPrice {
                    line-height: .39rem;
                    font-size: 0.27rem;
                    color: #4E4E4E;
                    text-decoration: line-through;
                }
            }

            .itemGoods {
                width: 2.72rem;
                margin-right: .22rem;

                img {
                    width: 100%;
                }
            }

            .itemGoods:last-child {
                margin-right: 0;
            }
        }

        .goodsBtns {
            height: 1.8rem;
            position: fixed;
            margin: 0 0.2rem 0 0.49rem;
            bottom: 0;

            .itemBtn {
                width: .67rem;
                height: .67rem;
                vertical-align: top;
                margin-top: .2rem;
            }

            .btnLabel {
                color: #4E4E4E;
                font-size: .25rem;
            }

            .btnCollect {
                width: 1.5rem;
                text-align: center;
            }

            .btnBook {
                background: linear-gradient(to right, rgb(246, 137, 53), rgba(255, 205, 88, 0.97));
                margin-right: 0.3rem;
            }

            .btnBuy {
                width: 2.8rem;
                height: 1rem;
                line-height: 1rem;
            }

        }
    }

    .chooseNumberDialog {
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;

        .goodsInfo {
            height: auto;
            margin: 0.5rem 0.22rem 1rem 0.26rem;
            z-index: 1001;

            .title {
                line-height: 1.35rem;
                font-size: .39rem;

                .iconStore {
                    width: .39rem;
                    vertical-align: text-top;
                    margin-right: .15rem;
                }

                .goods_name {
                    width: 7.65rem;
                }

                .iconClose {
                    width: 1rem;
                    text-align: center;
                }
            }

            .goodsDetails {
                .iconGoods {
                    width: 2rem;
                    height: 1.9rem;
                }

                .goodsName {
                    width: 4.5rem;
                    -webkit-line-clamp: 2;
                    font-size: .32rem;
                }

                .goodsPriceInfo {
                    font-size: 0.35rem;
                    padding: 0.2rem 0;
                    justify-content: space-between;

                    .goodsPrice {
                        margin-right: 0.4rem;
                    }

                    .goodsNums {
                        color: #4e4e4e;
                    }
                }

                .goodsLableBox {
                    font-size: .25rem;

                    .goodsLableContent {
                        margin-bottom: 0.4rem;
                        display: flex;

                        .goodsLableTitle {
                            width: 1rem;
                            margin-right: 0.1rem;
                        }

                        .goodsLableGuige {
                            flex-wrap: wrap;

                            .itemAttribute {
                                display: block;
                                border-radius: 0.04rem;
                                margin-right: 0.2rem;
                                margin-bottom: 0.2rem;
                                padding: 0.05rem 0.2rem;
                            }

                            .normal {
                                color: #ff9609;
                                background: #fef3db;
                            }

                            .choosed {
                                color: #ff9609;
                                background: #fe1715;
                            }
                        }
                    }

                }

                .package {
                    width: fit-content;
                    line-height: .6rem;
                    background-color: #FEF3DB;
                    color: #FF9609;
                    font-size: .25rem;
                    padding: 0 .2rem;
                }

                .goodsPrice {
                    vertical-align: top;
                    width: 1.9rem;
                    text-align: right;
                    font-size: .39rem;
                }

                .goodsNumber {
                    .weui-cell {
                        height: 1rem;
                        line-height: 1rem;
                        font-size: .34rem !important;
                        padding: 0 !important;
                    }

                    .weui-cells:before {
                        border-top: none !important;
                    }

                    .weui-cells:after {
                        border-bottom: none !important;
                    }

                    .vux-number-selector-sub, .vux-number-selector-plus {
                        width: 1rem !important;
                        height: 1rem !important;
                        line-height: 1rem !important;
                        text-align: center !important;
                        padding: 0 !important;
                    }

                    .vux-number-input {
                        width: 2rem !important;
                        height: 1rem !important;
                        line-height: 1rem !important;
                        padding: 0 !important;
                    }
                }
            }

            .btnGroups {
                text-align: center;

                .btnBuy {
                    width: 2.8rem;
                    height: 1rem;
                    line-height: 1rem;
                    margin-top: 1rem;
                }
            }


        }
    }

</style>
